<template>
    <div class="cell">
        <Header title="小区列表" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div class="box_wrapper" v-for="(item,index) in cellList" :key="index">
            <div class="box_cell">
                <p>{{item.communityName}}</p>
            </div>
            <div class="box_main" v-for="(items,i) in item.blockList" ref="check" :key="i" @click="check(items)">
                <p>{{items.fullName}}</p>
                <img v-if="items.fullName === unit"  class="right"  src="../assets/icon_right.png">
            </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import { Toast } from "mint-ui";
import { myBlock } from '../old_request'
export default {
    data(){
        return{
            cellList:[],
            unit:'',
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back(); 
        },
        check(items){
            let that = this;
            that.$store.commit('cell',items);
            that.unit = that.$store.state.unit;
            // that.wrapper.setlocalstoge('item',items);
            let old = that.wrapper.getlocalstoage('item');      //把本地的数据拿出来 下面三条代码用来更新本地数据
            old.defaultBlock.fullName = that.unit;
            old.defaultBlock.blockId = items.blockId;
            old.defaultBlock.id = items.id;
            that.wrapper.setlocalstoge("item",old);             //更新完后重新赋值回去
            that.$store.commit('repeat');   
            Toast({
                message: "切换成功",
                iconClass: "iconfont icon-success_no_circle",
                duration: 1500
            });
            setTimeout(function(){
                that.$router.back();                 //跳转到首页            
            },2000)
        }
    },
    created(){
        let that = this;

        that.unit = that.$store.state.unit;
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}timestamp=${that.wrapper.gettime()}userId=${that.$store.state.userid}`),
            "timestamp":that.wrapper.gettime(),
            "userId":that.$store.state.userid,                 //获取本地用户id
            "mobile":that.wrapper.getlocalstoage('mobile')                  //获取本地手机号码
        }
        myBlock(data,that).then( (res)=> {
             //console.log(res)
            if(res.code === 0){     
                that.cellList = res.data;
                that.isflag = false;
            }
        })
    }
}
</script>

<style scoped>
    .cell{
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background: #E5E5E5;
        margin-top: 50px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .right{
        position: absolute;
        right: 10px;
        margin-top: 5px;
    }
    .box_cell{
        background: #E5E5E5;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        padding: 0px 3%;
    }
    .box_main{
        display: flex;
        height: 50px;
        line-height: 50px;
        background: white;
        padding: 0 3%;
        position: relative;
    }
</style>